<h2>Hero Detail</h2>
<h3><i>A FormGroup with multiple FormControls</i></h3>

<button (click)="addLair()" type="button">Add a Secret Lair</button>

<form [formGroup]="heroForm" novalidate>
  <div class="form-group">
    <label class="center-block">Name:
      <input class="form-control" formControlName="name">
    </label>
  </div>

  <div formArrayName="secretLairs" class="well well-lg">
    <ng-container *ngIf="secretLairs">
      <div *ngFor="let address of secretLairs.controls; let i=index" [formGroupName]="i">
        <h4>Address #{{i + 1}}</h4>

        <div style="margin-left: 1em;">
          <div class="form-group">
            <label class="center-block">Street:
              <input class="form-control" formControlName="street">
            </label>
          </div>
          <div class="form-group">
            <label class="center-block">City:
              <input class="form-control" formControlName="city">
            </label>
          </div>
          <div class="form-group">
            <label class="center-block">State:
              <select class="form-control" formControlName="state">
                <option *ngFor="let state of states" [value]="state">{{state}}</option>
              </select>
            </label>
          </div>
          <div class="form-group">
            <label class="center-block">Zip Code:
              <input class="form-control" formControlName="zip">
            </label>
          </div>
        </div>
        <br>

      </div>
    </ng-container>
  </div>


  <div class="form-group radio">
    <h4>Super power:</h4>
    <label class="center-block">
      <input type="radio" formControlName="power" value="flight">Flight
    </label>
    <label class="center-block">
      <input type="radio" formControlName="power" value="x-ray vision">X-ray vision
    </label>
    <label class="center-block">
      <input type="radio" formControlName="power" value="strength">Strength
    </label>
  </div>
  <div class="checkbox">
    <label class="center-block">
      <input type="checkbox" formControlName="sidekick">I have a sidekick.
    </label>
  </div>
</form>

<p>Form value: {{heroForm.value | json}}</p>
<p>Form status: {{heroForm.status | json}}</p>
<!--<p>Name value: {{heroForm.get('name').value}}</p>-->
<!--<p>Street value: {{heroForm.get('address.street').value}}</p>-->
